import React, {Component} from 'react';
import {Modal,  Form,  Input,  Select,  DatePicker,  Popconfirm
    ,  Row,  Col,  Button,  Icon,  Upload,  message,Table,Pagination} from 'antd';
import PurchaseModal from './purchase_item';
import FilterPanel from './purchase_filter';
import moment from 'moment'
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
const dateFormat = 'YYYY-MM-DD';
import _ from 'underscore'
const config = require('../../config');

class _Main extends Component {

  constructor(props) {
    super(props);
    this.state = {page:1,pageSize:10,orderBy:'createAt',data:[],visible:false,visible1:false,};
  }
    showModelHandler =async (e) => {
      if (e) e.stopPropagation();
        this.setState({
          visible1: true,
        });
    }
    handleSubmit =async (e) => {
      if (e) e.stopPropagation();
        this.setState({
          visible1: false,
        });
    }
    hideModelHandler =async (e) => {
      if (e) e.stopPropagation();
        this.setState({
          visible1: false,
        });
    }
  async changeStatus(id,tag,cnum){
    // if(tag=="pay"){
    //   let to_user = []
    //   let filter = {'role':{$in:['accountant','accountant_manager']}};
    //   let users = await UserModel.fetch({
    //     filter:filter,
    //     limit:999999,
    //     startPos: 0,
    //   })
    //   users.data.list.map(d=>to_user.push(d.cnum));
    //   let res=await PurchaseModel.updateById(id,{status:'inPay',to_user:to_user,note:cnum+'采购单审核成功',action:'添加'});
    //   res.status == 'success' ? '' : message.error('提交失败');
    // }else if(tag=="purchase"){
    //   let res=await PurchaseModel.updateById(id,{status:'cancel'});
    //   res.status == 'success' ? '' : message.error('作废失败');
    // }
    // this.updateList()
  }
  inputSuitCase(obj,key){
    // smalltalk.prompt('录入提箱单号', '*', '20').then(function(value) {
    //   obj[key]=v
    //   let data = this.state.data
    //   this.setState({data})
    // }, function() {
    //     console.log('cancel');
    // });
    // dialogs.prompt('username', 'joe.smith@gmail.com', function(ok) {
    //   console.log('prompt with default',  ok)
    //
    // })

  }

  render() {
    let filter={}
    const { children } = this.props;
    const columns = [
        {
          title: <span style={{fontSize:"14px"}}>基本信息</span>,
          dataIndex: 'brand_num',
          key: 'brand_num',
          render: (text,record) =><ul>
            <li>编号：<span>{record.cnum}</span></li>
            <li>品牌：<span>{record.brand_num}</span></li>
            <li>采购币种：<span>{record.currency_num}</span></li>
            <li>采购专员：<span>{record.purchase_user}</span></li>
            <li>采购经理：<span>{record.purchase_master}</span></li>
            <li>合同编号：<span>{record.contract_num}</span></li>
            <li>线下合同编号：<span>{record.contract.offline_num}</span></li>
            <li>客户编号：<span>{record.contract.customer.cnum}</span></li>
            <li>客户姓名：<span>{record.contract.customer.name}</span></li>
            <li>客户地址：<span>{record.contract.customer.address}</span></li>
            <li>提货单号：<span>{record.take_num}</span></li>
            <li>下单日期：<span>{moment(record.order_at).format('YYYY-MM-DD')}</span></li>
            <li>计划到货时间：<span>{moment(record.plan_arrive_at).format('YYYY-MM-DD')}</span></li>
          </ul>
        },
        {
          title: <span style={{fontSize:"14px"}}>产品列表</span>,
          dataIndex: 'cnum',
          key: 'cnum',
          render: (text,record) => (
                  <table style={{borderSpacing:"10px"}}>
                    <tbody>
                    <tr>
                    <th>产品</th><th>图片</th><th>产品部件</th>
                    <th>价格</th>
                    <th>到货编号</th><th>产品PI</th><th>到货部件列表</th>
                    </tr>
                    {record.products.map(pd=><tr key={pd.stock_num}>
                      <th>编号{pd.product_num}<br/>品牌{pd.product.brand_num}<br/>型号{pd.product.model}<br/>名字{pd.product.name}</th>
                      <th><img style={{width:"100px",heigth:"100px"}}
                        src={config.host+'/file/'+pd.product.pic}/></th><th>{pd.product.components.map(cp=><div key={cp.name}>
                          {cp.name} * {cp.quantity}
                        </div>)}</th>
                      <th>原价{pd.stock.origin_money}元<br/> 折扣{pd.stock.discount}<br/>合同售价{pd.stock.contract_money}元</th>
                      <th>{pd.stock.cnum}</th><th>{pd.stock.product_identity||''}</th><th>{pd.stock.components.map(cp=><div key={cp.cnum} style={{lineHeight:"18px"}}>
                        {cp.cnum} : {cp.name},提箱单号{cp.suitcase_num||''},状态：<b style={{color:"red"}}>{cp.status}</b> 箱单号{cp.box_order_num},箱号{cp.box_num},箱数{cp.box_quantity}
                      </div>)}</th>
                    </tr>)}
                    </tbody>
                </table>
          )
        }
      ];
    return (
      <span style={{fontSize:"14px"}}>
                <span onClick={this.showModelHandler}>
                  { children }
                </span>
                <Modal
                title={'已入库采购单信息'}
                visible={this.state.visible1}
                onCancel={this.hideModelHandler}
                onOk={this.handleSubmit}
                width="90%"
              >
                  <Table columns={columns} dataSource={this.props.data}
                      rowKey={record => record.cnum} pagination={false} scroll={{}} style={{fontSize:"14px !important"}}/>
               </Modal>
      </span>
    );
  }
}

export default _Main;